<template>
  <div class="_wz_menuHome">

    <template v-for="item in menuList">
      <div class="_wz_menuHome_list" @click="menuJump(item)">
        <div class="_wz_menuHome_list_img">
          <img :src="item.menuIcon ? apiUrl.imgUrl + item.menuIcon : '/src/assets/logo.png'" style="height: 100%;">
        </div>
        <div class="_wz_menuHome_list_name">{{item.name}}</div>
        <div class="_wz_menuHome_list_describe">{{!!item.menuName ?item.menuName : '暂无功能介绍'}}</div>
      </div>
    </template>
  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'menuHome',//组件名称
  components: {},//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法


    const state = reactive({
      menuList:[],

    });

    //路由跳转
    const menuJump = (data)=>{

      let menuData = getFirstMenu(data.children)

      if(!!menuData.target){
        //target 打开方式
        //  _blank:外部链接   _innerblank:外部打开内部路由
        if(menuData.target == '_blank'){
          window.open(menuData.menuUrl, '_blank')
        }else{
          window.open('#/' + menuData.menuUrl, '_blank')
        }
      }else{
        router.push({ path:'/' + menuData.key, query: {}})
      }
    }

    const getFirstMenu = (data)=> {
      for (let i = 0; i < data.length; i++) {
        if(!!data[i].children && data[i].children.length > 0){
          return getFirstMenu(data[i].children)
        }else{
          return data[i];
        }
      }
    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      let menuList = (JSON.parse(sessionStorage.getItem('loginData')).userMenu.modules[0].menus).filter(item => !item.menuHide)

      // k.menuHide
      state.menuList = $common.convertTree(menuList,{
        value:'menuUrl',
        title:'name',
        children:'children',
      });
      console.log(menuList)

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      menuJump,//路由跳转
      apiUrl,
    }
  }
})


</script>
<style lang="less">
._wz_menuHome{
  width: 1200px;
  //width: 100%;
  margin: auto;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #f5f9f9;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;

  ._wz_menuHome_list{
    display: inline-block;
    width: 290px;
    height: 240px;
    background: #fff;
    border-radius: 10px;
    margin: 0 9px 9px 0;
    padding: 23px 20px 0;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;

    ._wz_menuHome_list_img{
      width: 80px;
      height: 80px;
    }
    ._wz_menuHome_list_name{
      font-size: 20px;
      font-weight: 500;
      color: #1a1f2b;
      line-height: 29px;
      margin-top: 8px;
      padding: 0 10px;
    }
    ._wz_menuHome_list_describe{
      font-size: 15px;
      font-weight: 400;
      color: #6e7483;
      line-height: 23px;
      padding-left: 10px;
      margin-top: 16px;
    }
  }

  ._wz_menuHome_list:hover {
    position: relative;
    z-index: 1;
    transform: scale3d(1.1, 1.1, 1);
    box-shadow: 0px 0px 40px 0px #dae0e4;
  }
}
</style>
